<template>
    <div id="alimap-container"></div>
</template>

<script>
import * as API from '@/api/admin/config'
export default {
    data() {
        return {
            map: null,
            marker: null,
            baseCenter: [],
            allTagMarker:new Map(),//所有设备显示的标记点
            allMarkers: new Map()//预警的标记点
        }
    },
    beforeMount() {
       
        API.getConfigByKeys({ configKeys: 'map_center' }).then(res => {
            if (res.data.code === 0) {
                if (res.data.data.map_center.indexOf(',') > -1) {
                    this.baseCenter = res.data.data.map_center.split(',')
                    //设置地图中心点
                    // this.map.setCenter(this.baseCenter)

                    this.initMap()
                }
            }
        })
    },
    methods: {
        //设置实时预警点
        doPositioning(longitude, latitude) {
            this.map.setZoom(18)
            this.map.setCenter([longitude, latitude]) //设置地图中心点
            // new AMap.Marker({
            //     position: [longitude, latitude],
            //     icon: './img/m2.png',
            //     size: new AMap.Size(52, 52),  //图标大小
            //     imageSize: new AMap.Size(56,56),
            //     map: this.map
            // })
        },
        doAlarmPositioning(longitude, latitude) {
            console.log('开始标记预警位置')
            this.createAlarmMarker([longitude, latitude])
        },
        //清理地图上的指定标记
        doClearMarker(key) {
            if (this.allMarkers.has(key)) {
                this.allMarkers.get(key).setMap(null)
            }
        },
        //清理设备分布标记的点
        doClearTagTypeMarker(key) {
            if(this.allTagMarker.has(key)){
                let ks = this.allTagMarker.get(key)
                ks.forEach(item=>{
                    item.setMap(null)
                })
            }
        },
        //添加不同设备
        doAddMarkerByTypes(lnglats,type){
            let map = this.map
            let mks = []
            let key = 'equipment-'+type
            this.doClearTagTypeMarker(key)
            for (var i = 0, marker; i < lnglats.length; i++) {
                var marker = new AMap.Marker({
                    position: lnglats[i],
                    icon:new AMap.Icon({
                        image: type==0?'./img/rfid.png':type==1?'./img/db.png':'./img/camera.png',
                        size:new AMap.Size(50,50),
                        imageSize: new AMap.Size(50,50)
                    }),
                    offset: new AMap.Pixel(-43, -60),
                    map: map
                })
                marker.on('click', markerClick)
                marker.emit('click', { target: marker })
                mks.push(marker)
            }
            this.allTagMarker.set(key, mks)
            function markerClick(e) {
                console.log('标记点击事件')
                // map.setZoom(18)
                map.setCenter(e.target.getPosition()) //设置地图中心点
            }
        },
        //设置所有位处理的预警点
        doSetAllAlarmPosition(lnglats) {
            if (lnglats.length == 0 || this.map == null) {
                return
            }
            let map = this.map
            this.map.setCenter(lnglats[0].lnglat) //设置地图中心点
            for (var i = 0, marker; i < lnglats.length; i++) {
                console.log(lnglats[i])
                var markerContent = `
                    <div class="box">
                        <div class="big"></div>
                        <div class="small"></div>
                        <div class="circle"></div>
                        <div class="solid">
                            <div class="solid-x">
                                <div class="coll-police-content">
                                    <div class="coll-police-text"> ${lnglats[i].equipmentName||''}</div>
                                </div>
                            </div>
                        </div>
                    </div>`

                var marker = new AMap.Marker({
                    position: lnglats[i].lnglat,
                    content: markerContent,
                    icon: './img/alarm1.png',
                    offset: new AMap.Pixel(-43, -60),
                    map: map
                })

                marker.on('click', markerClick)
                marker.emit('click', { target: marker })
                this.allMarkers.set(lnglats[i].id, marker)
            }

            function markerClick(e) {
                console.log('标记点击事件')
                // map.setZoom(18)
                map.setCenter(e.target.getPosition()) //设置地图中心点
            }
        },
        createAlarmMarker(position) {
            var markerContent = `
                <div class="box">
                    <div class="big"></div>
                    <div class="small"></div>
                    <div class="circle"></div>
                    <div class="solid">
                        <div class="solid-x">
                            <div class="coll-police-content">  
                            </div>
                        </div>
                    </div>
                </div>`
            // var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) })
            let marker = new AMap.Marker({
                position: position,
                // 将 html 传给 content
                content: markerContent,
                map: this.map,
                icon: './img/alarm1.png',
                // 以 icon 的 [center bottom] 为原点
                offset: new AMap.Pixel(-13, -30)
            })
            // map.add(marker)
            // map.setFitView()
            this.map.setCenter(position) //设置地图中心点
        },
        changeMapModel(){
            if(this.map.viewMode == '2D'){
                this.map.viewMode = '3D'
                this.map.setPitch(60)
                this.map.setRotation(-35)
                this.map.setZoom(17)
                this.map.setLayers([
                    // 高德默认标准图层
                    new AMap.TileLayer.Satellite(),
                    // 楼块图层
                    new AMap.Buildings({
                        zooms: [16, 18],
                        zIndex: 10,
                        heightFactor: 2//2倍于默认高度，3D下有效
                    })
                ])
            }else{
                this.map.viewMode = '2D'
                this.map.setZoom(12)
                this.map.setPitch(65)
                this.map.setLayers([
                    // 高德默认标准图层
                    new AMap.TileLayer.Satellite()
                ])
                this.map.clearMap()
            }
            
        },
        initMap() {
           
            var map = new AMap.Map('alimap-container', {
                zoom: 12,
                pitch: 65,
                rotation: 0,
                viewMode: '2D', //开启3D视图,默认为关闭
                zooms: [3, 20],
                center: this.baseCenter
            })
            this.map = map
            var styleName = 'amap://styles/darkblue' //grey
            map.setMapStyle(styleName)
            map.clearMap() // 清除地图覆盖物
            map.on('complete',()=>{
                console.log('地图加载完毕')
                this.$emit('complete')
            })

            // map.addControl(new AMap.ControlBar({   //添加控件
            //     showZoomBar:true,     //显示zoom条控件,false表示不显示
            //     showControlButton:true,  //默认false,false表示取消,旋转按钮将变成南北指南针
            //     position:{  //控件的定位
            //         left:'50px',
            //         bottom:'30px'
            //     }
            // }))
        }
    }
}
</script>
<style>
#alimap-container {
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 0;
    font-family: '微软雅黑';
}
#tipinput {
    position: fixed;
    left: 100px;
    top: 100px;
    z-index: 1000;
}
.box {
    position: relative;
}

.box > div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    border-radius: 50%;
}

.big {
    width: 50px;
    height: 50px;
    background: #f56432;
    opacity: 0.8;
    animation: zoom linear 1.2s infinite;
    animation-delay: 0.1 s;
}

.small {
    width: 30px;
    height: 30px;
    background: #f56432;
    opacity: 0.6;
    animation: zoom linear 1.2s infinite;
}

.circle {
    width: 6px;
    height: 6px;
    background: #034c6a;
    position: relative;
}

.circle img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 10px;
    height: 10px;
}

@keyframes zoom {
    0% {
        transform: translateX(-50%) translateY(-50%) scale(0.5);
        opacity: 0.8;
    }

    100% {
        transform: translateX(-50%) translateY(-50%) scale(1.3);
        opacity: 0.1;
    }
}
.solid {
    width: 40px;
    height: 2px;
    background: #034c6a;
    position: absolute;
    transform: translateX(-1px) rotate(-45deg) translateY(0) !important;
    border-radius: 0 !important;
    transform-origin: left bottom;
    border-right: -6px;
    border-top-right-radius: 1px !important;
}

.solid-x {
    width: 50px;
    height: 2px;
    background: #034c6a;
    position: absolute;
    right: -100%;
    transform: rotate(45deg) translateX(-15px) translateY(-20px);
    display: flex;
    align-items: center;
}

.coll-police-content {
    position: relative;
    /* right: -100%; */
    /* height: 40px; */
    /* background: linear-gradient(180deg, rgba(32, 70, 102, 0.4), rgba(23, 34, 50, 0.5)); */
    /* border: 1px solid #034c6a; */
    color: #fff;
    /* min-width: 250px; */
}
.coll-police-text {
    text-align: left;
    position: absolute;
    top: 10px;
    background: linear-gradient(180deg,rgb(21 44 66),rgb(23 48 73));
    /* background: -webkit-gradient(linear, left top, left bottom, from(rgba(32, 70, 102, 0.4)), to(rgba(23, 34, 50, 0.5))); */
    /* background: linear-gradient( 180deg, rgba(32, 70, 102, 0.4), rgba(23, 34, 50, 0.5)); */
    /* background: linear-gradient( 180deg, rgb(196 84 47), rgb(84 45 40)); */
    border: 1px solid #034c6a;
    font-size: 12px;
    padding: 5px;
}
.coll-police-content .top {
    display: flex;
    align-items: center;
    margin: 0 20px;
}

.coll-police-content .bottom {
    border-top: 1px solid;
    position: absolute;
    bottom: 10px;
    margin-top: 5px;
    padding-top: 10px;
    display: flex;
    justify-content: space-around;
    font-size: 14px;
}

.coll-police-content .bottom > div {
    flex: 1;
    text-align: center;
}

.coll-police-content .bottom > div > a {
    color: #fff;
}

.coll-police-content .bottom > div:nth-child(2) {
    border-left: 1px solid;
    border-right: 1px solid;
}

.coll-police-content .top .preson-msg {
    font-size: 14px;
}

.coll-police-content .top img {
    width: 124px;
    margin-right: 20px;
}
</style>